<template>
    <div class="nav">
        <scroll-view scroll-x class="tab" :scroll-left="scrollLeft" v-if="getSrcFlag">
            <div class="tab-item" v-for="(item, index) in tabList" :key="index" :class="currentTab===index?'active':''" @tap="swichNav(index)">{{item}}</div>
        </scroll-view>
        <swiper class="swiper"
            :current="currentTab"
            @change="switchTab"
            :style="{height:winHeight+'rpx'}"
        >
            <block v-for="(item, index) in swiperList" :key="index">
                <swiper-item class="item">
                    <scroll-view class="item-box" scroll-y>
                        <div class="box-content" v-for="(itemSecond, indexSecond) in contentList" :key="indexSecond">
                            <image :src="itemSecond.img" class="content-l"/>
                            <div class="content-m">
                                <h3 class="name">{{itemSecond.name}}</h3>
                                <p class="type">{{itemSecond.type}}</p>
                                <p class="desc">{{itemSecond.desc}}</p>
                            </div>
                            <button class="btn" @tap="hint">问TA</button>
                        </div>
                    </scroll-view>
                </swiper-item>
            </block>
        </swiper>
        <div class="loading-container" v-if="!getSrcFlag">
            <loading></loading>
        </div>
    </div>
</template>

<script>
import tools from 'common/js/tools'
import Loading from 'components/loading'
export default {
  name: 'NavBar',
  data () {
    return {
      winHeight: '',
      currentTab: 0,
      scrollLeft: 0,
      tabList: ['健康', '情感', '职场', '育儿', '纠纷', '青葱', '全部', '其他'],
      swiperList: [0, 1, 2, 3, 4, 5, 6, 7],
      contentList: [
        {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }, {
          img: '../../static/images/man.png',
          name: '欢颜',
          type: '知名情感博主',
          desc: '134个回答，2234人听过'
        }
      ],
      getSrcFlag: false
    }
  },
  components: {
    Loading
  },
  onLoad () {
    const that = this
    wx.getSystemInfo({
      success (res) {
        let clientHeight = res.windowHeight
        let clientWidth = res.windowWidth
        let rpxR = 750 / clientWidth
        let calc = clientHeight * rpxR - 160
        that.winHeight = calc + 80
        console.log(res, calc, that.winHeight)
        that.getSrcFlag = true
      }
    })
  },
  methods: {
    switchTab (e) {
      const that = this
      that.currentTab = e.mp.detail.current
      that.checkTab()
    },
    swichNav (index) {
      const that = this
      that.currentTab = index
      that.checkTab()
    },
    checkTab () {
      const that = this
      if (that.currentTab > 3) {
        that.scrollLeft = 300
      } else {
        that.scrollLeft = 0
      }
    },

    hint () {
      tools.showToast('对案例有任何疑问欢迎在相关文章给我留言~')
    }
  }
}
</script>

<style scoped lang="stylus">
.loading-container
  position fixed
  width 100%
  height 100%
  top 0
  bottom 0
  left 0
  right 0
  background #fff
  margin auto
  display flex
  justify-content center
  align-items center
.nav
  height 100%
  width 100%
  .tab
    width 100%
    overflow hidden
    height 80rpx
    white-space nowrap
    position fixed
    top 0
    left 0
    z-index 9
    line-height 80rpx
    box-sizing border-box
    color #333
    font-size 30rpx
    .tab-item
      margin 0 36rpx
      display inline-block
    .active
      color #ED758D
      position relative
      &:after
        content ''
        display block
        height 0
        width 60rpx
        border-top 4rpx solid #ED758D
        border-bottom 4rpx solid #ED758D
        border-radius 8rpx
        position absolute
        bottom 0
        left 0
  .swiper
    width 100%
    padding-top 80rpx
    .item
      background #fff
      .item-box
        height 100%
        padding 0 30rpx
        .box-content
          width 690rpx
          display flex
          justify-content flex-start
          align-items center
          padding 30rpx 0
          border-bottom 1rpx solid #f5f5f5
          .content-l
            width 100rpx
            height 100rpx
            margin-right 20rpx
          .content-m
            flex 1
            display flex
            flex-direction column
            justify-content flex-start
            align-items flex-start
            .name
              color #333
              font-size 36rpx
              margin-bottom 10rpx
              height 50rpx
              line-height 50rpx
            .type, .desc
              height 40rpx
              line-height 40rpx
              color #333
              margin-bottom 10rpx
              font-size 26rpx
            .desc
              margin-bottom 0
          .btn
            border 1rpx solid #ED758D
            border-radius 16rpx
            height 70rpx
            line-height 70rpx
            color #ED758D
            text-align center
            font-size 30rpx
</style>
